/**
 * @description  登录次数分布
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
import { Spin } from 'antd';
import { SecondHeaderC, CircleChartsC } from '../../../comps';

class LoginTimesTop5 extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {}
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, visitStatisticsM, dispatch } = nextProps;
    const { organizationId } = visitStatisticsM;
    if (organizationId !== this.props.visitStatisticsM.organizationId) {
      dispatch({
        type: 'visitStatisticsM/save',
        payload: { LoginTotalTimesTrend: [] },
      });
      if (organizationId) {
        this.getData(args, organizationId);
      }
    }
  }

  getData = (params, id) => {
    const { dispatch } = this.props;

    dispatch({
      type: 'visitStatisticsM/getLoginFrequency',
      payload: { ...params, id },
    });
  };

  render() {
    const {
      visitStatisticsM: { LoginTotalTimesTrend, name = '' },
    } = this.props;

    return (
      <div>
        <SecondHeaderC title={`登录次数分布(${name})`} />
        <Spin spinning={LoginTotalTimesTrend.length == 0} tip='加载中...'>
          {LoginTotalTimesTrend.length > 0 ? (
            <CircleChartsC data={LoginTotalTimesTrend} height={300} type='ring' center={['40%', 'center']} />
          ) : (
            <div style={{ width: '100%', height: '310px' }}></div>
          )}
        </Spin>
      </div>
    );
  }
}
export default connect(({ visitStatisticsM }) => ({
  visitStatisticsM,
}))(LoginTimesTop5);
